import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import styles from './basicInfo.css';
import avatar from '../../../../../../../framework/utils/avatar';
import CustomsItemNoArrow from '../CustomsItemNoArrow/CustomsItemNoArrow';
import Line from '../../../../../../../common/borderLine/Line';

const avatarImg = require('../../../../../../../icons/personal/default-avatar.jpg');
const phoneImg = require('../../../../../../../icons/personal/basic-phone.png');
const emailImg = require('../../../../../../../icons/personal/basic-email.png');

const BasicInfo = ({
  profile,
  gpsDistance,
  onOk
}) => {

  // console.log('profile',JSON.stringify(profile));

  const compileProps = {
    label: '基本信息',
    text: '编辑',
    onOk
  }

  return (
    <div className={styles.container}>
      <CustomsItemNoArrow {...compileProps} />
      <Line/>
      <div className={styles.content}>
        <div className={styles.avatarImg}>
          <img src={profile.avatar ? profile.avatar : avatarImg} />
        </div>
        <div >
          <div className={`${styles.rowView} ${styles.basicText}`} >
            {profile.name} | {profile.sex} | {`${profile.age}岁`} | {`${profile.height}cm`}
          </div>
          <div className={styles.rowView}>
            {gpsDistance ? (
              `${gpsDistance.province}${gpsDistance.city}${gpsDistance.district}`
            ):''}
          </div>
          <div className={styles.rowView} >
            <img className={styles.phoneImg} src={phoneImg} />
            <span> {profile.phone} </span>
          </div>
          <div className={styles.rowView} >
            <img className={styles.emailImg} src={emailImg} />
            <span> {profile.email ? profile.email : '未绑定'} </span>
          </div>
  {/*        <div className={styles.skillView}>
            {
              profile.skillArr.map((item,index) => {
                return (
                  <div key={index} className={styles.skillItem}>
                    {item}
                  </div>
                )
              })
            }
          </div>  */}
        </div>
      </div>



    </div>
  )
}



  export default BasicInfo
